
import './App.css';
import React from "react";
import LogicFlow from "@logicflow/core";
import { DndPanel, SelectionSelect,Control,Menu,BpmnElement,BpmnAdapter,MiniMap,UserTaskView,UserTaskModel  } from '@logicflow/extension';
import "@logicflow/core/dist/style/index.css";
import { useEffect, useRef } from "react";
// 矩形
import { RectNode, RectNodeModel } from "@logicflow/core";
import '@logicflow/extension/lib/style/index.css'
import icons from "./icons";
import Properties from './component/Properties';
import {JqpStart,JqpEnd,JqpCondition,JqpUserTask,JqpSystemTask,JqpSequenceFlow} from './component/JqpFlow'

const readOnly = window.readOnly === true ? true : false;

LogicFlow.use(DndPanel);
LogicFlow.use(SelectionSelect);
if(!readOnly){
  LogicFlow.use(Control);
}
LogicFlow.use(Menu);
LogicFlow.use(BpmnElement);
// LogicFlow.use(BpmnAdapter);
LogicFlow.use(MiniMap);

export default class App extends React.Component{
  constructor(props) {
    super(props);
    this.container = React.createRef();
    this.properties = React.createRef();
    this.state = {
      nodes:[],
      curNode:null,
      lf:null,
      time:new Date().getTime()
    };
  }
  componentDidMount() {
    // console.info("mount");
    // if(this.lf){
    //   return;
    // }


    const lf = new LogicFlow({
      container: this.container.current,
      grid: true,
      isSilentMode:readOnly,
      stopZoomGraph:true,
      stopScrollGraph:true,
      keyboard: {
        enabled: true
      },
      customBpmnEdge:"JqpSequenceFlow",
      // width: 1000,
      // height: 800
    });
    this.lf = lf;
    lf.register(JqpStart);
    lf.register(JqpUserTask);
    lf.register(JqpSystemTask);
    lf.register(JqpCondition);
    lf.register(JqpEnd);
    lf.register(JqpSequenceFlow);
    lf.setDefaultEdgeType("JqpSequenceFlow")
    lf.extension.dndPanel.setPatternItems(readOnly ? [] :[
      {
        label: '选区',
        icon: icons.selection,
        callback: () => {
          lf.extension.selectionSelect.openSelectionSelect();
          lf.once('selection:selected', () => {
            lf.extension.selectionSelect.closeSelectionSelect();
          });
        }
      },
      {
        type: 'JqpStart',
        text: '开始节点',
        label: '开始节点',
        icon: icons.start
      },
      {
        type: 'JqpUserTask',
        text: '用户任务',
        label: '用户任务',
        icon: icons.user,
        className: 'important-node'
      },
      // {
      //   type: 'JqpSystemTask',
      //   text: '系统任务',
      //   label: '系统任务',
      //   icon: icons.user,
      //   className: 'import_icon'
      // },
      {
        type: 'JqpCondition',
        text: '条件判断',
        label: '条件判断',
        icon: icons.condition,
      },
      {
        type: 'JqpEnd',
        text: '结束节点',
        label: '结束节点',
        icon: icons.end,
      }
    ]);
    lf.on('node:click,edge:click', (data) => {
      console.info("click",data);

      this.properties.current.updateNode(data,lf);
    })
    lf.on('blank:click',(data) =>{
      this.properties.current.updateNode(null,lf);
    })
    const graphData = window.graphData || {
      nodes: [
      ],
      edges: [
      ]
    }
    //lf.extension.miniMap.show(100, 100);
    lf.render(graphData);

    //lf.extension.miniMap.show(this.container.current.offsetWidth-200, 100);

    this.setState({
      lf:this.lf
    });
  }
  save(){
    window.saveFlow && window.saveFlow(this.state.lf.getGraphRawData());
  }
  view(){
    window.open(window.location.href,"查看流程","title=查看流程,resizable=no,location=no,status=no,toolbar=no,height="+window.outerHeight*0.9+",width="+window.outerWidth*0.9+",left="+window.outerWidth*0.05+",top="+window.outerHeight*0.05+"")
  }

  render() {
    const readOnly = window.readOnly === true ? true : false;
    let showViewBtn = true;
    try {
      if(window.parent && window.parent.name == '查看流程'){
       showViewBtn = false;
      }
    }catch (e){}
    return <div className={'container'}>
      {readOnly ? (showViewBtn ? <div className={"viewBtn"} onClick={this.view.bind(this)}>全屏查看</div> : null) : <div className={"saveBtn"} onClick={this.save.bind(this)}>保存</div>}
      <div className={'container'} ref={this.container}></div>
      <Properties curNode={this.state.curNode} lf={this.state.lf} ref={this.properties}></Properties>
    </div>
  }
}
